import React from 'react';
import '../css/login.css';
import PostService from '../service/post'
import { observer } from 'mobx-react'
import { List, Avatar, Pagination, Link, Card, Row, Col } from 'antd'
import 'antd/lib/message/style'
import 'antd/lib/list/style'
import 'antd/lib/avatar/style'
import 'antd/lib/pagination/style'
import 'antd/lib/card/style'
import 'antd/lib/row/style'
import 'antd/lib/col/style'

@observer
export default class GetAll extends React.Component {
    constructor(props) {
        super(props);
        const { location: { search } } = props;  //此处获取到 ?page=10&size=20
        this.service = new PostService();
        this.service.getall(search)
    }
    handleChange(pageNo, pageSize) {  //处理页面切换的数据，其数据需要和后面要
        const search = '?page=' + pageNo + '&' + 'size=' + pageSize; // 拼接查询字符串
        this.service.getall(search);//异步请求，但页面的URL不变
        // window.location.href='/getall'+search;  // 操作地址栏，也可以加载查询字符串，其浏览器会
        //此处实现的是同步调用，其会将所有的页面都做了一边，速度很慢
    }

    render() {
        const data = this.service.posts;  //使用后其会自动刷新 
        const pagination = this.service.pagination;  //分页数据获取
        return (
            <div>
                <List
                    itemLayout="horizontal"
                    dataSource={data}
                    bordered="true"
                    hideOnSinglePage="true"
                    renderItem={item => (
                        <List.Item>
                            <List.Item.Meta
                                avatar={<Avatar src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1571932022162&di=f108eeab8bc4d45e6d9b85c36581f9ae&imgtype=0&src=http%3A%2F%2Fs7.sinaimg.cn%2Fmw690%2F0065sEcMzy74EYHBPMOa6%26690" />}
                                title={<a   href={"/#/get/"+item.post_id}>{item.post_title}</a>}
                                description={item.post_name}
                            />
                    </List.Item>
                    )}
                />
                <Row>
                    <Col span={pagination.pages + 2} offset={11} > <Pagination defaultCurrent={1} total={pagination.count} pageSize={this.service.pagination.size} onChange={this.handleChange.bind(this)} /></Col>
                    <h3><Col span={2} offset={22}  >总数:{this.service.pagination.count}</Col></h3>
                </Row>

            </div>
        )
    }
}


